<template>
	<div>
		<div class="form">
			<!--<p>广告类型:
				<el-select v-model="filterData.type" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>-->
			<el-input v-model="filterData.title" placeholder="Banner标题"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<!--<el-input v-model="filterData.url" placeholder="链接地址"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-->
			<!--<el-input v-model="filterData.title" placeholder="Banner标题"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-->
			<p>投放模式:
				<el-select v-model="filterData.mode" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in modeSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select> 
			</p>
			<p>广告分类:
				<el-select v-model="filterData.kind" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in kindSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>
			<el-input v-model="filterData.amount" placeholder="投放数量"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterUnit" placeholder="投放单价"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.id" placeholder="广告编号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterData.cycle" placeholder="可接广告周期数(天)" @keyup.native="isNum"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click="reset">重置</el-button>
				<el-button type="info" @click="add">新增</el-button>
				<el-button type="info" @click="issue" :disabled='busIdList.length<1'>发布</el-button>
			</p>
		</div>
		<el-table border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click.native.prevent="edit(scope)" type="text" size="small">
						编辑
					</el-button>
					<el-button @click.native.prevent="check(scope)" type="text" size="small">
						查看
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="广告编号" width="100">
			</el-table-column>
			<!--<el-table-column prop="type" label="广告类型" width="80" :formatter="formType">
			</el-table-column>-->
			<el-table-column prop="kind" label="广告分类" width="80" :formatter="formKind">
			</el-table-column>
			<!--<el-table-column prop="resourceUrl" label="资源地址" width="500">
			</el-table-column>-->
			<!--<el-table-column prop="url" label="链接地址" width="100">
			</el-table-column>-->
			<el-table-column prop="title" label="banner标题">
			</el-table-column>
			<!--<el-table-column prop="content" label="广告内容" width="200" show-overflow-tooltip>
			</el-table-column>-->
			<el-table-column prop="cycle" label="可接广告周期" width="110">
			</el-table-column>
			<el-table-column prop="mode" label="投放模式" width="80" :formatter="formMode">
			</el-table-column>
			<el-table-column prop="amount" label="投放数量" width="80">
			</el-table-column>
			<el-table-column prop="unitPrice" label="投放单价(元)" width="110" :formatter="formunitPrice">
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
				   :current-page="filterData.current" :current-page.sync="filterData.current" 
				   :page-sizes="[10, 15, 20, 30]" :page-size="filterData.size" 
				   layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!--新增弹窗-->
		<el-dialog title="广告发布" :visible.sync="centerDialogVisible" width="70%" center>
			<el-form ref="addData" :model="addData" :rules="rulesList" auto-complete="on" label-position="left">
				<div class="dialog">
					<p>
						<span>广告分类：</span>
						<el-form-item prop="kind">
							<el-select v-model="addData.kind" placeholder="请选择" :disabled='btnType==1'>&nbsp;&nbsp;&nbsp;&nbsp;
								<el-option v-for="item in kindSelect" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</p>
					<!--<p>
						<span>广告类型：</span>
						<el-form-item prop="type">
							<el-select v-model="addData.type" placeholder="请选择" :disabled='btnType==1'>&nbsp;&nbsp;&nbsp;&nbsp;
								<el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</p>-->
					<p>
						<span>投放模式：</span>
						<el-form-item prop="mode">
							<span class="dialog-msg">								
								<el-select v-model="addData.mode" placeholder="请选择" :disabled='btnType==1' @change='selectChange'>&nbsp;&nbsp;&nbsp;&nbsp;
									<el-option v-for="item in modeSelect" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</span>
						</el-form-item>
					</p>
					<p>
						<span>banner标题：</span>
						<el-form-item prop="title">
							<span class="dialog-msg"><el-input v-model="addData.title" type="text" placeholder="banner标题" :disabled='btnType==1'></el-input></span>
						</el-form-item>
					</p>
					<p>
						<span>性别：</span>
						<el-form-item prop="sex">
							<span class="dialog-msg">								
								<el-select v-model="addData.sex" placeholder="请选择" :disabled='btnType==1'>&nbsp;&nbsp;&nbsp;&nbsp;
									<el-option v-for="item in sexSelect" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</span>
						</el-form-item>
					</p>
					<div v-if='centerDialogVisible'>	
						<el-button type="primary" @click='chooseGuo'>点击选择全国</el-button><br />
						<div v-if='btnType!=1 && chooseAllGuo == false'>							
							<el-form-item prop="provinceCode">
								<el-select v-model="addressData.provinceCode" placeholder="请选择省" @change='proChange'>
							    	<el-option
							      		v-for="item in options"
							      		:key="item.value"
							      		:label="item.label"
							      		:value="item.value"
							      		>
							    	</el-option>
							  	</el-select>
						  	</el-form-item>
						  	<el-form-item prop="cityCode">
								<el-select v-model="addressData.cityCode" placeholder="请选择市" @change='cityChange'>
							    	<el-option
							      		v-for="item in cityOptions"
							      		:key="item.value"
							      		:label="item.label"
							      		:value="item.value"
							      		>
							    	</el-option>
							  	</el-select>
						  	</el-form-item>
						  	<el-form-item prop="areaCode">
								<el-select v-model="addressData.areaCode" multiple placeholder="请选择区">
							    	<el-option
							      		v-for="item in areaOptions"
							      		:key="item.value"
							      		:label="item.label"
							      		:value="item.value"
							      		>
							    	</el-option>
							  	</el-select>
						  	</el-form-item>
						</div>
						<div v-if='btnType==1' class="checkAdress">
							<p><el-input v-model='addData.province' disabled></el-input></p>
							<p><el-input v-model='addData.city'disabled></el-input></p>
							<p class="checkArea"><span v-for="item in addData.area">{{item}}</span></p>																			
						</div>
					</div>
					
					<!--<p v-if="addData.type != 0 && centerDialogVisible">						
							资源地址：
							<el-upload
							  	class="upload-demo"
							  	ref="upload"
							  	action="http://101.132.115.96:9008/bus/upload/uploadImage"
							  	:before-upload="beforeAvatarUpload"
							  	:on-preview="handlePreview"
							  	:on-remove="handleRemove"
							  	:before-remove="beforeRemove"
							  	multiple
							  	:limit="9"
							  	:on-exceed="handleExceed"
							  	:file-list="fileList"  								
  								:on-success="uploadSuccess"
							 	:disabled='btnType==1'>							 	
							  	<el-button size="small" type="primary" slot="trigger">选取文件</el-button>
							  	<div slot="tip" class="el-upload__tip">上传文件，不超过5Mb</div>
							</el-upload>
					</p>-->
					<!--<p v-if="btnType == 1" style="width:100%">						
						<span v-for='item in addData.images' v-if="addData.type==1 || addData.type==3">
							<img :src="item" style="width:150px"/>
						</span>
						<span v-for='item in addData.images' v-if="addData.type==2 || addData.type==4">
							<video :src="item" controls="controls">
								当前浏览器不支持 video直接播放，点击这里下载视频： <a :href="item">下载视频</a>
							</video>
						</span>
					</p>-->
					
					<!--<p v-if="addData.type != 1&&addData.type != 2">
						<span>广告内容：</span>
						<el-form-item prop="content">
							<span class="dialog-msg"><el-input v-model="addData.content" type="textarea" placeholder="广告内容" :disabled='btnType==1'></el-input></span>
						</el-form-item>
					</p>-->
					<addForm :getDataFromSet='addData.contentGroup' :btnType='btnType' @getDataFromAddForm='getDataFromAdd' class="addFormChild"></addForm>
					<p>
						<span>开始年龄：</span>
						<el-form-item prop="startAge">
							<span class="dialog-msg"><el-input-number v-model="addData.startAge" :step="1" :min='18' :disabled='btnType==1'></el-input-number></span>
						</el-form-item>
					</p>
					<p>
						<span>结束年龄：</span>
						<el-form-item prop="endAge">
							<span class="dialog-msg"><el-input-number v-model="addData.endAge" :step="1" :min='18' :disabled='btnType==1'></el-input-number></span>
						</el-form-item>
					</p>
					<p>
						<span>投放数量：</span>
						<el-form-item prop="amount">
							<span class="dialog-msg"><el-input-number v-model="addData.amount" :step="10" :disabled='btnType==1' :min='1'></el-input-number></span>
						</el-form-item>
					</p>
					<p>
						<span>投放单价：元</span>
						<el-form-item prop="unitPrice">
							<span class="dialog-msg"><el-input-number v-model="addData.unitPrice" :step="0.1" :disabled='btnType==1' :min='minUnitPrice'></el-input-number></span>
						</el-form-item>
					</p>
					<p>
						<span>可接广告周期：(天)</span>
						<el-form-item prop="cycle">
							<span class="dialog-msg"><el-input-number v-model="addData.cycle" :step="1" :disabled='btnType==1' :min='1'></el-input-number></span>
						</el-form-item>
					</p>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
	      		<el-button @click="closeDialog">取 消</el-button>
	      		<el-button type="primary" v-if='btnType==1' @click="closeDialog">确 定</el-button>
	      		<el-button type="primary" @click="sure" v-if='btnType==3'>保 存</el-button>
	      		<el-button type="primary" @click="sureEdit" v-if='btnType==2'>确 认</el-button>
	    	</span>
		</el-dialog>
	</div>
</template>

<script type="text/javascript">
	import { regionDataPlus,CodeToText } from 'element-china-area-data'
	import {adPage,adInsert,uploadImage,formatter,adType,adRelease,adEdit,typeSelect} from '@/api/common'
	import addForm from '@/views/addForm/index'
	Array.prototype.remove = function(val) { 
		var index = this.indexOf(val); 
		if (index > -1) { 
			this.splice(index, 1); 
		} 
	};
	export default {
		components:{
			addForm
		},
		created(){
			this.query();
			this.queryAdType()
		},		
		computed:{
			checkArea:function(){
				let province = this.addData.province == null?'':this.addData.province
				let city = this.addData.city == null?'':this.addData.city
				let area = this.addData.area == null?'':this.addData.area
				return province + city + area;
			},
		},
		methods: {			
			selectChange(item){				
				if(item == 0){
					this.minUnitPrice = 1.5;
					this.addData.unitPrice = 1.5;
				}else {
					this.minUnitPrice = 0.1;
					this.addData.unitPrice = 0.1;
				}
				console.log(this.minUnitPrice)
			},
			proChange(item){	
				this.addressData.cityCode = null
				this.addressData.areaCode = []
				let key = parseInt(item)
				return this.options.map((data)=>{	
					if (data.value == key) {		
						this.cityOptions  = data.children;
			            return;
			        }
				})
			},
			cityChange(item){
				this.addressData.areaCode = []
				let key = parseInt(item)
				console.log(key)
				return this.cityOptions.map((data)=>{	
					if (data.value == key) {		
						this.areaOptions  = data.children;
			            return;
			        }
				})
			},
			isNum(){
				this.filterData.cycle = this.filterData.cycle.replace(/\D/g,'');
				console.log(event)
			},
			beforeAvatarUpload(file) {
		        const isLt5M = file.size / 1024 / 1024 < 5;		
		        if (!isLt5M) {
		          this.$message.error('上传文件大小不能超过 5MB,请移除!');
		        }
		        return isLt5M;
		    },
			handleSizeChange(val) {
				this.filterData.size = val;
				this.query();
			},
			handleCurrentChange(val) {
				this.filterData.current = val;
				this.query();
			},
			
			handleRemove(file, fileList) {
				this.addData.resourceUrl.remove(file.response.data.url);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) { 
				this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			submitUpload() {
        		this.$refs.upload.submit();
      		}, 
			uploadSuccess(response, file, fileList){
				this.addData.resourceUrl.push(response.data.url);
				console.log(this.addData.resourceUrl)
			},			
			handleSelectionChange(val) {
				let arr = [];
				val.map(function(item){
					arr.push(item.id)
				});
				this.busIdList = arr;
			},			
      		formType(row, column){		
				return(formatter(row.type,this.typeSelect))
			},
			formKind(row, column){		
				return(formatter(row.kind,this.kindSelect))
			},
			formMode(row, column){		
				return(formatter(row.mode,this.modeSelect))
			},
			formunitPrice(row, column){
				return parseInt(row.unitPrice) / 100;
			},
			handleChange (value) {
        		var ctt = CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]]
        		console.log(ctt)
        		this.addData.province = CodeToText[value[0]];
        		this.addData.city = CodeToText[value[1]];
        		this.addData.area = CodeToText[value[2]];
      		},
			closeDialog(){
				this.$refs.addData.resetFields();
				this.centerDialogVisible = false;
				this.query();
			},
			chooseGuo(){
				this.chooseAllGuo = true;
				this.addressData.provinceCode = ''
				this.addressData.cityCode = null
				this.addressData.areaCode = []
			},
			getDataFromAdd(val){
				this.addData.contentGroup = val.domains
			},
			add() {
				this.btnType = 3;
				this.centerDialogVisible = true;
				this.FileList = [];
				this.addData = {
									busId:this.$store.state.user.busId,				//商户id
									contentGroup:[],					//广告内容
									title: '', 					//banner标题
									mode: null, 				//投放模式
									kind: null, 				//广告分类
									amount: null, 				//投放数量
									unitPrice: null, 			//投放单价
									cycle: null, 				//广告周期
									sex:null,						//性别
									startAge:null,					//开始年龄
									endAge:null,					//结束年龄
									area: [], 						//区
									city: '', 							//市
									province: '', 						//省									
								}
			},
			check(data){
				this.btnType = 1;
				this.centerDialogVisible = true;
				this.addData = JSON.parse(JSON.stringify(data.row));				
				this.addData.unitPrice = parseInt(this.addData.unitPrice) / 100;
				if(this.addData.images ){
					this.addData.images = this.addData.images.split(',')
				}				
				console.log(this.addData)
			},
			
			edit(data){
				this.btnType = 2;
				this.centerDialogVisible = true;
				this.addData = data.row;
				this.addData.unitPrice = parseInt(this.addData.unitPrice) / 100;
				this.addData.status = [4]
				this.addressData.provinceCode = ''
				this.addressData.cityCode = ''
				this.addressData.areaCode = []
				console.log(typeof(this.addData.areaCode))
				console.log(this.addData)
			},
			sure(){				
				this.addData.province = CodeToText[this.addressData.provinceCode];
				if(this.addressData.cityCode === '' || !this.addressData.cityCode){
					this.addData.city = null;
				}else{
					this.addData.city = CodeToText[this.addressData.cityCode];
				}        		
        		let arr = [];
        		this.addressData.areaCode.forEach(item =>{
					arr.push(CodeToText[item])
				})
        		this.addData.area = arr;
				console.log(this.addData)
				this.$refs.addData.validate(valid => {
					if(valid){						
						this.centerDialogVisible = false;							
						this.addData.unitPrice = this.addData.unitPrice * 100;
						adInsert(this.addData).then(res =>{
							this.query()
							this.$message.success(res.msg)
						}).catch(res =>{
							this.$message.error(res.msg)
						})
					}					
				})
			},
			sureEdit(){				
				this.addData.province = CodeToText[this.addressData.provinceCode];
				
        		if(this.addressData.cityCode === '' || !this.addressData.cityCode){
					this.addData.city = null;
				}else{
					this.addData.city = CodeToText[this.addressData.cityCode];
				} 
        		let arr = [];
        		this.addressData.areaCode.forEach(item =>{
					arr.push(CodeToText[item])
				})
        		this.addData.area = arr;
				console.log(this.addData)
				this.$refs.addData.validate(valid => {
					if(valid){
						this.centerDialogVisible = false;
						this.addData.unitPrice = this.addData.unitPrice * 100;
						adEdit(this.addData).then(res =>{
							this.query()
							this.$message.success(res.msg)
						}).catch(res =>{
							this.$message.error(res.msg)
						})
					}					
				})	
			},
			query(){				//查询
				if(this.filterUnit != null && this.filterUnit != ''){
					this.filterData.unitPrice = parseFloat(this.filterUnit) * 100;
				}
				adPage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
					this.total = parseInt(res.data.total);
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			queryAdType(){
				adType().then(res =>{
					this.kindSelect = res.data;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			reset(){										//重置
				this.filterData = {					 
					busId:this.$store.state.user.busId,				//商户id
					type: null, 			//广告类型
					title: '', 				//banner标题
					//url: '', 				//链接地址
					mode: null, 			//投放模式
					kind: null, 			//广告分类
					amount: null, 			//投放数量
					unitPrice: null, 		//投放单价
					id: null, 				//广告编号
					cycle: null, 			//广告周期
					status:[4],			
					current:1,
					size:10,
				};
				this.filterUnit = null;
				this.query();
				
			},
			issue(){
				adRelease(this.busIdList).then(res =>{
					this.query();
					this.$message.success(res.msg)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			}
		},
		data() {
			const notNull = (rule, value, callback) => {
				value = value == null?'':value;
				if(value.toString() == '') {					
					callback(new Error('输入不能为空！'))
				} else {
					callback()
				}
			}
			const endMoreStart = (rule, value, callback) =>{
				if(value < this.addData.startAge) {					
					callback(new Error('结束年龄不小于开始年龄'))
				} else {
					callback()
				}
			}
			/*const moreLength = (rule,value,callback) => {
				console.log(value)
				if(value.length < 1) {
					callback(new Error('请选择地址！'))
				} else {
					callback()
				}
			}*/
			return {
				//主列表数据
				filterData:{
					busId:this.$store.state.user.busId,				//商户id
					type: null, 			//广告类型
					title: '', 				//banner标题
					//url: '', 				//链接地址
					mode: null, 			//投放模式
					kind: null, 			//广告分类
					amount: null, 			//投放数量
					unitPrice: null, 		//投放单价
					id: null, 				//广告编号
					cycle: null, 			//广告周期					
					status:[4],
					current:1,
					size:10,
				},
				tableData: [],				//主列表数据
				centerDialogVisible: false,
				total:null,
				btnType:1,				//1查看  2编辑  3新增
				fileList: [],
				busIdList:[], 				//发布列表
				filterUnit:null,
				minUnitPrice:0.1,
				chooseAllGuo:false,
				//新增数据
				addData:{
					contentGroup:[],					//广告内容
					title: '', 					//banner标题
					mode: null, 				//投放模式
					kind: null, 				//广告分类
					amount: null, 				//投放数量
					unitPrice: null, 			//投放单价
					cycle: null, 				//广告周期   
					sex:null,						//性别
					startAge:null,					//开始年龄
					endAge:null,					//结束年龄
					area: [], 						//区
					city: '', 							//市
					province: '', 						//省
					
				},
				addressData:{
					areaCode: [], 							//区
					cityCode: '', 							//市
					provinceCode: '', 						//省
				},
				rulesList:{
					type: [{
						required: true,
						trigger: 'change',
						validator: notNull
					}],
					title: [{
						required: true,
						trigger: 'blur',
						validator: notNull
					}],
					mode: [{
						required: true,
						trigger: 'change',
						validator: notNull
					}],
					sex: [{
						required: true,
						trigger: 'change',
						validator: notNull
					}],
					kind: [{
						required: true,
						trigger: 'change',
						validator: notNull
					}],
					amount: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					}],
					unitPrice: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					}],
					cycle: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					}],
					age: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					}],
					startAge: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					}],
					endAge: [{
						required: true,
						trigger: 'blur',
						validator: notNull,
						type: "number"
					},{
						required: true,
						trigger: 'blur',
						validator: endMoreStart,
						type: "number"
					}],
				},
				
				//辅助数据
				options: regionDataPlus,					//地区选项、
				cityOptions:{},
				areaOptions:{},
				kindSelect: [],					//广告分类
				typeSelect: typeSelect,	
				modeSelect: [{ 					//投放模式
					value: 0,
					label: '转发'
				}, {
					value: 1,
					label: '阅读'
				}],
				sexSelect: [{
					value: 2,
					label: '不限'
				}, { 					//投放模式
					value: 0,
					label: '女'
				}, {
					value: 1,
					label: '男'
				}],
			}
		}
	}
</script>

<style scoped="scoped">
	.form .el-input,.form .el-select{
		width: 120px;
		margin-bottom: 20px;
	}
	
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
	
	.dialog p {
		width: 80%;
	}
	.el-form-item {
	    width: 150px;
	    margin-bottom: 20px;
	    display: inline-block;
	}
	.checkAdress p{
		width:200px;
		display: inline-block;
	}
	.checkAdress .checkArea {
		width:auto;		
		background-color: #f5f7fa;
	    border-color: #e4e7ed;
	    color: #c0c4cc;
	    cursor: not-allowed;
	    -webkit-appearance: none;
	    background-color: #fff;
	    background-image: none;
	    border-radius: 4px;
	    border: 1px solid #dcdfe6;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    color: #606266;
	    display: inline-block;
	    font-size: inherit;
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	.addFormChild {
		border:1px solid #ddd;
		padding:10px
	}
</style>
